<template>
	<view class="count">
		<view class="topCon">
			<u-tabs-swiper ref="tabs" inactive-color="#2f2319" active-color="#2f2319" :bold="true" @change="tabsChange"
				:current="current" :is-scroll="true" :list="lists"></u-tabs-swiper>
		</view>
		<view class="body">
			<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
				<view class="list">
					<view v-for="(item,index) in list" @click="goDetils(item)" :key="index"
						class="listItem p-25 b-r-30 b-f">
						<view class="topOrder f f-a-c f-j-b">
							<view class="hao f f-a-c">
								订单号：{{item.trade_no}}
								<image src="/static/my/copy7.png" @click.stop="copy(item.trade_no)" class="copy"
									mode="">
								</image>
							</view>
							<view class="due">
								{{item.status==0? '已取消':item.status==1? '待付款':item.status==2? '待发货':item.status==3? '待收货':item.status==4? '待评价':item.status==5? '已完成':item.status==6?'待服务':'待上门'}}
							</view>
						</view>
						<view v-for="(ite,ind) in item.products" :key="ind" class=" ">
							<view class="order f f-a-c">
								<view class="left">
									<image :src="ite.image" class="xiao" mode="scaleToFill"></image>
								</view>
								<view class="rig">
									<view class="rigName">
										{{ite.name}}
									</view>
									<view class="detils">
										{{ite.sku_name}}
									</view>
									<view class="price f f-a-c f-j-b">
										<view class="pic">
											¥{{ite.price}}
										</view>
										<view class="num">
											x{{ite.num}}
										</view>
									</view>
								</view>
							</view>
							<view class="btnss">
								<!-- <view @click="chaKan(ite,item)" v-if="item.status==5" class="orderQu">
									查看评价
								</view>
								<view v-if="item.status==4" @click="goComer(ite.product_id,item)" class="pay">
									去评价
								</view> -->
							</view>
						</view>
						<view class="pice f f-a-c f-j-f-e">
							实付: <text>¥{{item.amount}}</text>
						</view>
						<view class="btn f f-a-c f-j-f-e">
							<view v-if="item.status==1||item.status==2" @click.stop="certilQu(item)" class="orderQu">
								取消订单
							</view>
							<view v-if="item.status==4||item.status==5" @click="oneOrder" class="orderQu">
								再来一单
							</view>
							<!-- 	<view @click="chaKan(item.id)" v-if="item.status==5" class="orderQu">
								查看评价
							</view> -->
							<!-- <view v-if="item.status==4" @click="goComer(item)" class="pay">
								去评价
							</view> -->
							<view @click.stop="payImmediately(item.id)" v-if="item.status==1" class="pay">
								立即支付
							</view>
							<view v-if="item.status==3" @click.stop="comfig(item)" class="pay">
								确认收货
							</view>
							<view v-if="item.status==7||item.status==6" @click.stop="comfig(item)" class="pay">
								确认完成
							</view>
						</view>
					</view>
					<view v-if="list.length==0" class="zanwu">
						<image src="/static/home/zanwu.png" class="img" mode=""></image>
						<view class="nameImg">
							还没有记录哦！
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<u-modal title="取消订单" cancel-text="再想想" @confirm="confirmFn" confirm-color="#977961" :show-cancel-button="true"
			v-model="show" :content="content"></u-modal>
		<u-popup v-model="showss" width="85%" height="300" border-radius="25" mode="center">
			<view class="deilsd">
				<button class="btn" open-type="contact" :plain="true">点击联系客服</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showss: false,
				show: false,
				content: '您确定要取消订单吗，取消后无法恢复',
				current: 0,
				page: 1,
				list: [],
				lists: [{
						name: '全部',
						value: ''
					},
					{
						name: '待付款',
						value: 1
					},
					{
						name: '待发货',
						value: 2
					}, {
						name: '待收货',
						value: 3
					},
					{
						name: '待服务',
						value: 6
					}, {
						name: '待上门',
						value: 7
					},
					{
						name: '待评价',
						value: 4
					}, {
						name: '已完成',
						value: 5
					}, {
						name: '已取消',
						value: 0
					}
				],
				status: '',
				total: '',
				item: {}
			}
		},
		onShow() {
			this.showss = false
			this.show = false
			this.page = 1
			this.list = []
			this.initList()
		},
		methods: {
			// 这个是支付
			async payImmediately(id) {
				let res = await this.$api.payOrder({
					id: id
				})
				if (res.code == 200) {
					wx.requestPayment({
						//成功之后，调用小程序微信支付
						timeStamp: res.data.pay_info.timeStamp,
						nonceStr: res.data.pay_info.nonceStr,
						package: res.data.pay_info.packageValue,
						signType: res.data.pay_info.signType,
						paySign: res.data.pay_info.paySign,
						success: async ress => {
							this.$msg('支付成功！')
							setTimeout(() => {
								this.page = 1
								this.list = []
								this.initList()
								// uni.navigateBack()
							}, 1000)
						},
						fail: (flires) => {
							this.$msg('支付失败！')
						}
					})
				} else {
					this.$msg(res.msg)
				}
			},
			// /再来一单
			oneOrder() {
				uni.switchTab({
					url: '/pages/shoop/index'
				})
			},
			// 去评价
			goComer(id, item) {
				uni.navigateTo({
					url: `/pageB/GoComment?orderId=${item.id}&id=` + id
				})
			},
			// 确认订单
			async comfig(item) {
				let n = await this.$api.comfigOrder({
					id: item.id
				})
				this.$msg(n.msg)
				if (n.code == 200) {
					setTimeout(() => {
						this.page = 1
						this.list = []
						this.initList()
					}, 800)
				}
			},
			// 点击确认取消
			async confirmFn() {
				let n = await this.$api.cancelOrder({
					id: this.item.id
				})
				this.$msg(n.msg)
				if (n.code == 2001) {
					setTimeout(() => {
						this.show = false
						this.showss = true
						// this.initList()
					}, 800)
				} else if (n.code == 200) {
					setTimeout(() => {
						this.page = 1
						this.list = []
						this.initList()
						this.show = false
					}, 800)
				}
			},
			// 点击取消
			certilQu(item) {
				this.item = item
				this.show = true
			},
			copy(item) {
				uni.setClipboardData({
					data: item, //	这里是个坑接受字符串类型 value转化为字符串
					success: () => {
						//调用方法成功
						this.$msg('复制成功')
						console.log('success');
					}
				})
			},
			async initList() {
				let n = await this.$api.orderList({
					status: this.status,
					page: this.page
				})
				this.total = n.data.total
				this.list = [...this.list, ...n.data.rows]
			},
			// 查看评价
			chaKan(ite, item) {
				uni.navigateTo({
					url: `/pageB/MyAssessments?id=${ite.id}&orderId=` + item.id
				})
			},
			goDetils(item) {
				uni.navigateTo({
					url: '/pageB/OrderDetils?id=' + item.id
				})
			},
			onreachBottom() {
				if (this.list.length < this.total) {
					this.page++
					this.initList()
				}
			},
			tabsChange(e) {
				this.current = e
				this.status = this.lists[e].value
				this.page = 1
				this.list = []
				this.initList()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.u-tabs-swiper-container {
		overflow: hidden !important;
	}

	.u-tabs-swiper-container .swiper-container {
		overflow: hidden !important;
	}

	.u-tabs-swiper-container .swiper-container .swiper-wrapper {
		overflow: hidden !important;
	}

	.zanwu {
		position: fixed;
		top: 45%;
		left: 50%;
		transform: translate(-50%, -50%);

		.img {
			width: 280rpx;
			height: 200rpx;
			margin-left: 50%;
			transform: translateX(-50%);
		}

		.nameImg {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-400;
			font-weight: 400;
			text-align: center;
			margin-top: 10rpx;
			color: $hui;
		}
	}

	.deilsd {
		position: relative;
		padding: 20rpx;
		height: 100%;
		// background-color: pink;
		overflow-y: auto;

		.btn {
			position: absolute;
			border: none;
			background-color: #977961;
			text-align: center;
			color: #fff;
			width: 90%;
			left: 50%;
			font-weight: 600;
			top: 50%;
			transform: translate(-50%, -50%);
		}
	}

	.btnss {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.orderQu {
		width: 176rpx;
		height: 72rpx;
		line-height: 70rpx;
		border: 1rpx solid $ebe2da;
		border-radius: 37rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-500;
		font-weight: 600;
		text-align: center;
		color: $hei;
		margin-right: 25rpx;
	}

	.pay {
		width: 176rpx;
		height: 72rpx;
		line-height: 70rpx;
		background: $brown;
		border-radius: 36rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-500;
		font-weight: 600;
		text-align: center;
		color: $fffefc;
	}

	.body {
		height: calc(100vh - 100rpx);
		width: 100%;
		padding: 20rpx 0;
		background-color: #f7f6f2;

		.list {
			.listItem {
				width: 93%;
				margin: 0 auto;
				margin-bottom: 25rpx;

				.btn {
					margin-top: 20rpx;

					.orderQu {
						width: 176rpx;
						height: 72rpx;
						line-height: 70rpx;
						border: 1rpx solid $ebe2da;
						border-radius: 37rpx;
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-500;
						font-weight: 600;
						text-align: center;
						color: $hei;
						margin-right: 25rpx;
					}

					.pay {
						width: 176rpx;
						height: 72rpx;
						line-height: 70rpx;
						background: $brown;
						border-radius: 36rpx;
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-500;
						font-weight: 600;
						text-align: center;
						color: $fffefc;
					}
				}

				.pice {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-400;
					font-weight: 400;
					text-align: LEFT;
					color: #6a5f55;
					margin-top: 20rpx;

					text {
						font-size: 28rpx;
						font-family: 'HarmonyOS Sans Bold';
						font-weight: 700;
						color: $hei;
					}
				}

				.order {
					margin-top: 30rpx;


					.rig {
						width: 70%;

						.price {
							width: 100%;

							.pic {
								font-size: 28rpx;
								font-family: HarmonyOS Sans, HarmonyOS Sans-400;
								font-weight: 400;
								text-align: LEFT;
								color: $hei;
							}

							.num {
								font-size: 28rpx;
								font-family: PingFang SC, PingFang SC-400;
								font-weight: 400;
								text-align: LEFT;
								color: $hui;
							}
						}

						.detils {
							font-size: 28rpx;
							font-family: PingFang SC, PingFang SC-400;
							font-weight: 400;
							text-align: LEFT;
							color: $hui;
							margin: 15rpx 0;
						}

						.rigName {
							width: 100%;
							font-size: 28rpx;
							font-family: PingFang SC, PingFang SC-400;
							font-weight: 600;
							text-align: LEFT;
							color: $hei;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}

					.left {
						height: 160rpx;
						border-radius: 8rpx;
						width: 35%;
						margin-right: 20rpx;

						.xiao {
							width: 160rpx;
							height: 160rpx;
							object-fit: cover;
						}
					}
				}

				.topOrder {
					.due {
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-500;
						font-weight: 600;
						text-align: LEFT;
						color: $brown;
					}

					.hao {
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-500;
						font-weight: 600;
						text-align: LEFT;
						color: $hei;

						.copy {
							width: 32rpx;
							height: 32rpx;
							margin-left: 10rpx;
						}
					}
				}
			}
		}
	}

	.topCon {
		height: 90rpx;
		width: 100%;
		background: #fffefc;
	}

	.count {
		height: 100vh;
		width: 100%;
		background-color: #fffefc;
	}
</style>